การใช้งาน Navigation API ขั้นสูง: การจัดการ Routing และ History สำหรับ Single Page Application

Navigation API แสดงถึงความก้าวหน้าที่สำคัญในวิธีการจัดการ Routing และ History ภายใน Single Page Applications (SPAs) วิธีการแบบดั้งเดิมมักอาศัยการจัดการอ็อบเจ็กต์ `window.location` หรือใช้ไลบรารีของบุคคลที่สาม แม้ว่าแนวทางเหล่านี้จะใช้งานได้ดี แต่ Navigation API นำเสนอโซลูชันที่คล่องตัว มีประสิทธิภาพ และมีฟีเจอร์ที่ครบครันกว่า ทำให้ผู้พัฒนามีอำนาจควบคุมประสบการณ์การนำทางของผู้ใช้ได้มากขึ้น

Navigation API คืออะไร?

Navigation API คือ API ของเบราว์เซอร์สมัยใหม่ที่ออกแบบมาเพื่อลดความซับซ้อนและปรับปรุงวิธีที่ SPA จัดการการนำทาง, Routing และ History โดยแนะนำอ็อบเจ็กต์ใหม่ที่ชื่อว่า `navigation` ซึ่งมีเมธอดและอีเวนต์ที่ช่วยให้นักพัฒนาสามารถดักจับและควบคุมอีเวนต์การนำทาง, อัปเดต URL และรักษาประวัติการเข้าชมที่สอดคล้องกันโดยไม่ต้องรีโหลดทั้งหน้า ซึ่งส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่รวดเร็ว, ราบรื่น และตอบสนองได้ดียิ่งขึ้น

ประโยชน์ของการใช้ Navigation API

• ประสิทธิภาพที่ดีขึ้น: การกำจัดการรีโหลดทั้งหน้าของ Navigation API ช่วยเพิ่มประสิทธิภาพของ SPA ได้อย่างมาก การเปลี่ยนระหว่างหน้าต่างๆ จะเร็วขึ้นและราบรื่นขึ้น นำไปสู่ประสบการณ์ผู้ใช้ที่น่าดึงดูดยิ่งขึ้น
• การควบคุมที่ดียิ่งขึ้น: API นี้ให้การควบคุมอีเวนต์การนำทางอย่างละเอียด ช่วยให้นักพัฒนาสามารถดักจับและแก้ไขพฤติกรรมการนำทางได้ตามต้องการ ซึ่งรวมถึงการป้องกันการนำทาง, การเปลี่ยนเส้นทางผู้ใช้ และการดำเนินการตรรกะที่กำหนดเองก่อนหรือหลังการนำทาง
• การจัดการ History ที่ง่ายขึ้น: การจัดการสแต็กประวัติของเบราว์เซอร์กลายเป็นเรื่องง่ายด้วย Navigation API นักพัฒนาสามารถเพิ่ม, แทนที่ และท่องไปในรายการประวัติได้โดยใช้โปรแกรม เพื่อให้แน่ใจว่าประสบการณ์การท่องเว็บจะสอดคล้องและคาดเดาได้
• การนำทางแบบ Declarative: Navigation API ส่งเสริมแนวทางการทำ Routing แบบ Declarative มากขึ้น ช่วยให้นักพัฒนาสามารถกำหนดกฎและพฤติกรรมการนำทางได้อย่างชัดเจนและรัดกุม ซึ่งช่วยปรับปรุงความสามารถในการอ่านและบำรุงรักษาโค้ด
• การทำงานร่วมกับเฟรมเวิร์กสมัยใหม่: Navigation API ถูกออกแบบมาให้ทำงานร่วมกับเฟรมเวิร์กและไลบรารี JavaScript สมัยใหม่ได้อย่างราบรื่น เช่น React, Angular และ Vue.js ทำให้นักพัฒนาสามารถใช้ประโยชน์จากฟีเจอร์ของ API ภายในกระบวนการพัฒนาที่มีอยู่ได้

แนวคิดและฟีเจอร์หลัก

1. อ็อบเจ็กต์ `navigation`

หัวใจของ Navigation API คืออ็อบเจ็กต์ `navigation` ซึ่งสามารถเข้าถึงได้ผ่านอ็อบเจ็กต์ `window` ทั่วโลก (เช่น `window.navigation`) อ็อบเจ็กต์นี้ให้การเข้าถึงคุณสมบัติและเมธอดต่างๆ ที่เกี่ยวข้องกับการนำทาง รวมถึง:

• `currentEntry`: คืนค่าอ็อบเจ็กต์ `NavigationHistoryEntry` ที่แสดงถึงรายการปัจจุบันในประวัติการนำทาง
• `entries()`: คืนค่าอาร์เรย์ของอ็อบเจ็กต์ `NavigationHistoryEntry` ที่แสดงถึงรายการทั้งหมดในประวัติการนำทาง
• `navigate(url, { state, info, replace })`: นำทางไปยัง URL ใหม่
• `back()`: นำทางกลับไปยังรายการประวัติก่อนหน้า
• `forward()`: นำทางไปยังรายการประวัติถัดไป
• `reload()`: รีโหลดหน้าปัจจุบัน
• `addEventListener(event, listener)`: เพิ่ม event listener สำหรับอีเวนต์ที่เกี่ยวข้องกับการนำทาง

2. `NavigationHistoryEntry`

อินเทอร์เฟซ `NavigationHistoryEntry` แทนรายการเดียวในประวัติการนำทาง โดยให้ข้อมูลเกี่ยวกับรายการนั้นๆ เช่น URL, state และ ID ที่ไม่ซ้ำกัน

• `url`: URL ของรายการประวัติ
• `key`: ตัวระบุที่ไม่ซ้ำกันสำหรับรายการประวัติ
• `id`: ตัวระบุที่ไม่ซ้ำกันอีกตัวหนึ่ง ซึ่งมีประโยชน์อย่างยิ่งสำหรับการติดตามวงจรชีวิตของอีเวนต์การนำทาง
• `sameDocument`: ค่าบูลีนที่ระบุว่าการนำทางนั้นเป็นการนำทางภายในเอกสารเดียวกันหรือไม่
• `getState()`: คืนค่า state ที่เชื่อมโยงกับรายการประวัติ (ตั้งค่าระหว่างการนำทาง)

3. อีเวนต์การนำทาง (Navigation Events)

Navigation API จะส่งอีเวนต์หลายอย่างที่ช่วยให้นักพัฒนาสามารถตรวจสอบและควบคุมพฤติกรรมการนำทางได้ อีเวนต์เหล่านี้รวมถึง:

• `navigate`: ถูกส่งเมื่อมีการเริ่มต้นการนำทาง (เช่น การคลิกลิงก์, การส่งฟอร์ม หรือการเรียก `navigation.navigate()`) นี่คืออีเวนต์หลักในการดักจับและจัดการคำขอการนำทาง
• `navigatesuccess`: ถูกส่งเมื่อการนำทางเสร็จสมบูรณ์
• `navigateerror`: ถูกส่งเมื่อการนำทางล้มเหลว (เช่น เนื่องจากข้อผิดพลาดของเครือข่ายหรือข้อยกเว้นที่ไม่ได้จัดการ)
• `currentchange`: ถูกส่งเมื่อรายการประวัติปัจจุบันมีการเปลี่ยนแปลง (เช่น เมื่อนำทางไปข้างหน้าหรือย้อนกลับ)
• `dispose`: ถูกส่งเมื่อ `NavigationHistoryEntry` ไม่สามารถเข้าถึงได้อีกต่อไป เช่น เมื่อถูกลบออกจากประวัติระหว่างการดำเนินการ `replaceState`

การสร้าง Routing ด้วย Navigation API: ตัวอย่างการใช้งานจริง

ลองมาดูตัวอย่างวิธีการใช้ Navigation API เพื่อสร้าง Routing พื้นฐานใน SPA แบบง่ายๆ สมมติว่าแอปพลิเคชันมีสามมุมมอง: หน้าแรก, เกี่ยวกับ และ ติดต่อ

ขั้นแรก สร้างฟังก์ชันเพื่อจัดการการเปลี่ยนแปลงของ Route:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Home
Welcome to the Home page!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
About
Learn more about us.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Contact
Get in touch with us.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Not Found
Page not found.
';
  }
}

ถัดไป เพิ่ม event listener ไปยังอีเวนต์ `navigate`:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // ป้องกันการนำทางเริ่มต้นของเบราว์เซอร์

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Resolve promise หลังจากจัดการ route แล้ว
  });

  event.transition = promise;
});

โค้ดนี้จะดักจับอีเวนต์ `navigate` ดึง URL จากอ็อบเจ็กต์ `event.destination` ป้องกันการนำทางเริ่มต้นของเบราว์เซอร์ เรียกใช้ `handleRouteChange` เพื่ออัปเดตเนื้อหา และตั้งค่า `event.transition` promise การตั้งค่า `event.transition` จะทำให้เบราว์เซอร์รอให้การอัปเดตเนื้อหาเสร็จสิ้นก่อนที่จะอัปเดตหน้าเว็บที่มองเห็น

สุดท้าย คุณสามารถสร้างลิงก์ที่กระตุ้นการนำทางได้:

Home | About | Contact

และแนบ click listener ไปยังลิงก์เหล่านั้น:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

นี่เป็นการตั้งค่า client-side routing พื้นฐานโดยใช้ Navigation API ตอนนี้ การคลิกลิงก์จะกระตุ้นอีเวนต์การนำทางที่อัปเดตเนื้อหาของ div `content` โดยไม่ต้องรีโหลดทั้งหน้า

การเพิ่มการจัดการ State

Navigation API ยังช่วยให้คุณสามารถเชื่อมโยง state กับแต่ละรายการในประวัติได้ ซึ่งมีประโยชน์สำหรับการเก็บรักษาข้อมูลข้ามอีเวนต์การนำทาง ลองแก้ไขตัวอย่างก่อนหน้านี้เพื่อรวมอ็อบเจ็กต์ state

เมื่อเรียก `navigation.navigate()` คุณสามารถส่งอ็อบเจ็กต์ `state` ได้:

window.navigation.navigate('/about', { state: { pageTitle: 'About Us' } });

ภายใน event listener ของ `navigate` คุณสามารถเข้าถึง state โดยใช้ `event.destination.getState()`:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'My App'; // ชื่อเรื่องเริ่มต้น

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Home
Welcome to the Home page!
';
      title = 'Home';
      break;
    case '/about':
      contentDiv.innerHTML = '
About
Learn more about us.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Contact
Get in touch with us.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Not Found
Page not found.
';
      title = '404 Not Found';
  }
  document.title = title;
}

ในตัวอย่างที่แก้ไขนี้ ฟังก์ชัน `handleRouteChange` จะรับพารามิเตอร์ `state` และใช้เพื่ออัปเดตชื่อเรื่องของเอกสาร หากไม่มีการส่ง state เข้ามา จะใช้ค่าเริ่มต้นเป็น 'My App'

การใช้ `navigation.updateCurrentEntry()`

บางครั้งคุณอาจต้องการอัปเดต state ของรายการประวัติปัจจุบันโดยไม่กระตุ้นการนำทางใหม่ เมธอด `navigation.updateCurrentEntry()` ช่วยให้คุณทำเช่นนั้นได้ ตัวอย่างเช่น หากผู้ใช้เปลี่ยนการตั้งค่าในหน้าปัจจุบัน คุณสามารถอัปเดต state เพื่อสะท้อนการเปลี่ยนแปลงนั้นได้:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Updated setting:', setting, 'to', value);
}

// ตัวอย่างการใช้งาน:
updateUserSetting('theme', 'dark');

ฟังก์ชันนี้จะดึง state ปัจจุบัน, รวมการตั้งค่าที่อัปเดตแล้ว, จากนั้นอัปเดตรายการประวัติปัจจุบันด้วย state ใหม่

กรณีการใช้งานขั้นสูงและข้อควรพิจารณา

1. การจัดการการส่งฟอร์ม

Navigation API สามารถใช้เพื่อจัดการการส่งฟอร์มใน SPA เพื่อป้องกันการรีโหลดทั้งหน้าและให้ประสบการณ์ผู้ใช้ที่ราบรื่นยิ่งขึ้น คุณสามารถดักจับอีเวนต์การส่งฟอร์มและใช้ `navigation.navigate()` เพื่ออัปเดต URL และแสดงผลลัพธ์โดยไม่ต้องรีโหลดทั้งหน้า

2. การดำเนินการแบบอะซิงโครนัส (Asynchronous Operations)

เมื่อจัดการอีเวนต์การนำทาง คุณอาจต้องดำเนินการแบบอะซิงโครนัส เช่น การดึงข้อมูลจาก API คุณสมบัติ `event.transition` ช่วยให้คุณสามารถเชื่อมโยง promise กับอีเวนต์การนำทาง เพื่อให้แน่ใจว่าเบราว์เซอร์จะรอให้การดำเนินการแบบอะซิงโครนัสเสร็จสิ้นก่อนที่จะอัปเดตหน้า ดูตัวอย่างข้างต้น

3. การคืนค่าตำแหน่งการเลื่อน (Scroll Restoration)

การรักษาตำแหน่งการเลื่อนระหว่างการนำทางเป็นสิ่งสำคัญในการมอบประสบการณ์ที่ดีแก่ผู้ใช้ Navigation API มีกลไกสำหรับคืนค่าตำแหน่งการเลื่อนเมื่อนำทางย้อนกลับหรือไปข้างหน้าในประวัติ คุณสามารถใช้คุณสมบัติ `scroll` ของ `NavigationHistoryEntry` เพื่อจัดเก็บและคืนค่าตำแหน่งการเลื่อน

4. การจัดการข้อผิดพลาด (Error Handling)

การจัดการข้อผิดพลาดที่อาจเกิดขึ้นระหว่างการนำทางเป็นสิ่งจำเป็น เช่น ข้อผิดพลาดของเครือข่ายหรือข้อยกเว้นที่ไม่ได้จัดการ อีเวนต์ `navigateerror` ช่วยให้คุณสามารถจับและจัดการข้อผิดพลาดเหล่านี้ได้อย่างเหมาะสม ป้องกันไม่ให้แอปพลิเคชันล่มหรือแสดงข้อความแสดงข้อผิดพลาดแก่ผู้ใช้

5. การเพิ่มประสิทธิภาพแบบก้าวหน้า (Progressive Enhancement)

เมื่อสร้าง SPA ด้วย Navigation API สิ่งสำคัญคือต้องพิจารณาถึง progressive enhancement ตรวจสอบให้แน่ใจว่าแอปพลิเคชันของคุณทำงานได้อย่างถูกต้องแม้ว่าเบราว์เซอร์จะไม่รองรับ Navigation API คุณสามารถใช้การตรวจจับฟีเจอร์เพื่อตรวจสอบว่ามีอ็อบเจ็กต์ `navigation` หรือไม่ และกลับไปใช้วิธีการทำ Routing แบบดั้งเดิมหากจำเป็น

การเปรียบเทียบกับวิธีการทำ Routing แบบดั้งเดิม

วิธีการทำ Routing แบบดั้งเดิมใน SPA มักอาศัยการจัดการอ็อบเจ็กต์ `window.location` หรือใช้ไลบรารีของบุคคลที่สาม เช่น `react-router` หรือ `vue-router` แม้ว่าวิธีเหล่านี้จะใช้กันอย่างแพร่หลายและเป็นที่ยอมรับ แต่ก็มีข้อจำกัดบางประการ:

• การรีโหลดทั้งหน้า: การจัดการ `window.location` โดยตรงอาจทำให้เกิดการรีโหลดทั้งหน้า ซึ่งอาจช้าและรบกวนประสบการณ์ของผู้ใช้
• ความซับซ้อน: การจัดการประวัติและ state ด้วยวิธีดั้งเดิมอาจซับซ้อนและเกิดข้อผิดพลาดได้ง่าย โดยเฉพาะในแอปพลิเคชันขนาดใหญ่และซับซ้อน
• ภาระด้านประสิทธิภาพ: ไลบรารีการทำ Routing ของบุคคลที่สามอาจเพิ่มภาระด้านประสิทธิภาพอย่างมาก โดยเฉพาะอย่างยิ่งหากไม่ได้ปรับให้เหมาะสมกับความต้องการเฉพาะของแอปพลิเคชันของคุณ

Navigation API จัดการข้อจำกัดเหล่านี้โดยการนำเสนอโซลูชันสำหรับการทำ Routing และการจัดการ History ที่คล่องตัว มีประสิทธิภาพ และมีฟีเจอร์ที่ครบครันกว่า โดยกำจัดการรีโหลดทั้งหน้า ลดความซับซ้อนในการจัดการ History และให้การควบคุมอีเวนต์การนำทางอย่างละเอียด

ความเข้ากันได้กับเบราว์เซอร์

ณ ปลายปี 2024, Navigation API ได้รับการสนับสนุนอย่างดีในเบราว์เซอร์สมัยใหม่ รวมถึง Chrome, Firefox, Safari และ Edge อย่างไรก็ตาม เป็นแนวทางปฏิบัติที่ดีเสมอที่จะตรวจสอบข้อมูลความเข้ากันได้ล่าสุดของเบราว์เซอร์จากแหล่งข้อมูลเช่น Can I use ก่อนที่จะนำ Navigation API ไปใช้ในแอปพลิเคชันที่ใช้งานจริง หากจำเป็นต้องรองรับเบราว์เซอร์รุ่นเก่า ควรพิจารณาใช้ polyfill หรือกลไกสำรอง

สรุป

Navigation API เป็นเครื่องมือที่ทรงพลังสำหรับการสร้าง SPA ที่ทันสมัยและมีประสิทธิภาพ พร้อมความสามารถในการจัดการ Routing และ History ขั้นสูง ด้วยการใช้ประโยชน์จากฟีเจอร์ของ API นี้นักพัฒนาสามารถสร้างประสบการณ์ผู้ใช้ที่รวดเร็ว, ราบรื่น และน่าดึงดูดยิ่งขึ้น แม้ว่าช่วงแรกของการเรียนรู้อาจจะยากกว่าเมื่อเทียบกับการใช้วิธีที่ง่ายและเก่ากว่า แต่ข้อดีของ Navigation API โดยเฉพาะในแอปพลิเคชันที่ซับซ้อน ทำให้เป็นการลงทุนที่คุ้มค่า เปิดรับ Navigation API และปลดล็อกศักยภาพสูงสุดของ SPA ของคุณ

แหล่งข้อมูลเพิ่มเติม

• เอกสารเว็บ MDN: Navigation API
• ข้อกำหนด WICG Navigation API